<template>
  <div class="consumerAccess centerFlex">
    <div class="accessCon">
      <div class="title centerFlex">欢迎使用半城云，创建管理员</div>
      <!-- 微信支付申请页 -->
      <Form
        style="margin-top:-80px"
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="100"
      >
        <FormItem label="公司名称" prop="company_name" label-width="150">
          <Input v-model="formValidate.company_name" placeholder="请输入公司名称" style="width:400px"></Input>
        </FormItem>
        <FormItem label="所在省份-城市" prop="username" label-width="150">
          <Select v-model="formValidate.provinces_code" style="width:120px" @on-change="getCity">
            <Option v-for="(item,index) in provinces" :key="index" :value="item.code">{{item.name}}</Option>
          </Select>
          <Select v-model="formValidate.city_code" style="width:120px" @on-change="getAreas">
            <Option v-for="(item,index) in cities" :key="index" :value="item.code">{{item.name}}</Option>
          </Select>
          <Select v-model="formValidate.area_code" style="width:120px">
            <Option v-for="(item,index) in areas" :key="index" :value="item.code">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="管理账号名" prop="username" label-width="150">
          <Input v-model="formValidate.username" placeholder="请输入管理账号名"></Input>
        </FormItem>
        <FormItem label="管理账号密码" prop="user_password" label-width="150">
          <Input v-model="formValidate.user_password" placeholder="请输入账号密码" type="password"></Input>
        </FormItem>
        <FormItem label="账户失效时间" prop="time_failure" label-width="150">
          <DatePicker
            v-modal="formValidate.time_failure"
            type="date"
            placeholder="请选择账户失效时间"
            style="width: 200px"
            @on-change="changeTime"
          ></DatePicker>
        </FormItem>
        <FormItem v-if="saas_id != ''" label="是否禁用" label-width="150" prop="is_enable">
          <Switch v-model="formValidate.is_enable" @on-change="change"/>
        </FormItem>
        <FormItem style="padding:30px 0 0 100px;">
          <Button type="primary" v-if="saas_id == ''" @click="handleSubmit('formValidate')">创建账号</Button>
          <Button type="primary" v-else @click="handleUpdate('formValidate')">确认修改</Button>
          <Button type="primary" @click="back()">返回</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Create, SaasInfo, SaasUpdate } from "api/recuit/user";
import { Provinces, Cities, Areas } from "api/recuit/public";

export default {
  name: "consumerAccess",
  data() {
    return {
      step: 1, //执行步骤
      isScan: false, //弹窗扫码
      confirmService: false, //是否展示服务号界面
      codeTip: "请扫描二维码进行授权",
      showMohu: false, //是否模糊二维码
      saas_id: '',
      formValidate: {
        username: "",
        company_name: "",
        user_password: "",
        is_enable: 1,
        time_failure: new Date(),
        provinces_code: "",
        city_code: "",
        area_code: ""
      },
      ruleValidate: {
        company_name: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur"
          }
        ],
        username: [
          {
            required: true,
            message: "请输入管理账户名",
            trigger: "blur"
          }
        ],
        user_password: [
          {
            required: true,
            message: "请输入管理账户密码",
            trigger: "blur"
          }
        ],
        time_failure: [
          {
            required: true,
            message: "请选择失效时间",
            trigger: "change"
          }
        ]
      },
      provinces: [],
      cities: [],
      areas: []
    };
  },
  components: {},
  mounted() {
    let saas_id = this.$route.params.saas_id;
    // let saas_id = "1";
    if (saas_id) {
      this.saas_id = saas_id;
      this.getEditData(saas_id);
    }else{
      this.saas_id = ''
    }
    this.getProvince();
    // this.step = this.$route.params.step;
  },

  methods: {
    // 获取省
    getProvince() {
      Provinces()
        .then(result => {
          this.provinces = result.provinces;
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 获取市
    getCity(e) {
      Cities({ provinceCode: e })
        .then(result => {
          this.cities = result.cities;
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    //获取区
    getAreas(e) {
      Areas({ citiesCode: e })
        .then(result => {
          this.areas = result.areas;
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    changeTime(e) {
      this.formValidate.time_failure = e;
    },
    back() {
      this.$router.go(-1);
    },
    //创建
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = this.formValidate;
          data.time_failure =
            new Date(this.formValidate.time_failure).valueOf() / 1000;
          Create(data)
            .then(result => {
              this.$Message.success("创建成功");
              setTimeout(() => {
                this.$router.push({name:'consumerYhList'})
              }, 1500);
            })
            .catch(err => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    //编辑
    handleUpdate(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.formValidate));
          data.time_failure =
            new Date(this.formValidate.time_failure).valueOf() / 1000;
          data.is_enable = data.is_enable ? 0 : 1;
          data.user_password = (data.user_password = this.oldPassword)
            ? ""
            : data.user_password;
          console.log(data, "修改数据");
          SaasUpdate(data)
            .then(result => {
              this.$Message.success("修改成功");
              setTimeout(() => {
                this.$router.push({name:'consumerYhList'})
              }, 1500);
            })
            .catch(err => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    //信息获取
    getEditData(saas_id) {
      SaasInfo({ saas_id })
        .then(result => {
          result.area_code = result.area_code.toString()
          this.formValidate = result;
          this.oldPassword = result.user_password;
          this.getCity(result.provinces_code);
          this.getAreas(result.city_code);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.centerFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button {
  height: 35px;
  border-radius: 5px;
  background: rgb(38, 119, 213);
  color: white;
  padding: 0 5px;
}
.errorButton {
  height: 35px;
  border-radius: 5px;
  background: rgb(217, 91, 96);
  color: white;
  padding: 0 5px;
}
.consumerAccess {
  width: 100%;
  height: 100vh;
  background: white;
  .accessCon {
    width: 80%;
    display: flex;
    .title {
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      margin-top: -160px;
      // height: 6rem;
    }
    .process {
      width: 100%;
      height: 4rem;
      .processName {
        font-size: 14px;
      }
      .processLine {
        padding: 0 20px;
      }
    }
    .rowLine {
      width: 100%;
      height: 2px;
      background: rgb(228, 228, 228);
    }
    .conBlock {
      width: 100%;
      height: 650px;
      .shouquanBlock {
        width: 70%;
        height: 100%;
        flex-direction: column;
        margin-top: -80px;
        .shouTitle {
          font-size: 16px;
          padding: 30px 0;
          font-weight: bold;
        }
        .headImg {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .minTitle {
          font-size: 14px;
          padding: 20px 0;
        }
        .conDetail {
          line-height: 25px;
          font-size: 14px;
          i {
            margin-top: -2px;
          }
        }
        .warnCon {
          color: red;
          padding: 30px 0 0 0;
          margin-bottom: -15px;
        }
      }
      .codeBlock {
        width: 70%;
        height: 100%;
        .imgBlock {
          width: 350px;
          height: 430px;
          padding: 0 30px;
          margin-top: -80px;
          img {
            width: 100%;
            height: 100%;
          }
          .imgTip {
            font-size: 12px;
            width: 100%;
            height: 4rem;
          }
        }
      }
      .warnBlock {
        widows: 30%;
        height: 90%;
        padding: 30px;
        border-left: 1px solid rgb(228, 228, 228);
        .warnTitle {
          font-size: 14px;
          padding: 0 10px;
        }
        .warnCon {
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
    .buttonBlock {
      width: 100%;
      height: 3rem;
      padding: 50px 0;
    }
  }
  .input-wrapper {
    position: relative;
  }
  .input-wrapper .upload-input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0;
  }
}
</style>
